import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'

export default class Index extends Component {

  static propTypes = {
    updateToDo:PropTypes.func.isRequired,
    delteItem:PropTypes.func.isRequired,
    todo:PropTypes.object.isRequired
  }

  state = {
    mouse:false
  }

  // 高阶函数 柯里化思想
  mouseMove = (flag)=>{
    return ()=>{
      this.setState({
        mouse:flag
      })
    }
  }

  handelCheck = (id)=>{
    return (event)=>{
      // console.log(id,event.target.checked)
      this.props.updateToDo(id,event.target.checked)
    }
  }

  render() {
    const {todo,delteItem} = this.props
    const {mouse} = this.state
    return (
      <div onMouseEnter={this.mouseMove(true)} onMouseLeave={this.mouseMove(false)} className="ListItem" style={{backgroundColor:mouse?'#ddd':'#fff'}}>
        <div>
          {/* defaultChecked 只有在第一次的时候会使用到 后面就不会响应式的变化的 所以一般都极其的少用 */}
          <input onChange={this.handelCheck(todo.id)} type="checkbox" name="" id={todo.id} checked={todo.done}/>
          <label htmlFor={todo.id}>{todo.name}</label>
        </div>
        <div style={{display:mouse?'block':'none'}} className="rightBtn">
          <span onClick={()=>{delteItem(todo.id)}}>删除</span>
        </div>
      </div>
    )
  }
}
